<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
		var draganddrop = {	
				products1 : [ {	id : 'product 1_11',price : 1100.00}, 
				              {	id : 'product 1_12',price : 1200.00}, 
				              {	id : 'product 1_13',price : 1300.00}, 
				              {	id : 'product 1_14',price : 1400.00},
				              { id : 'product 1_15',price : 1500.00} ],
				
				products2 : [ {	id : 'product 2_21',price : 2100.00}, 
				              {	id : 'product 2_22',price : 2200.00}, 
				              {	id : 'product 2_23',price : 2300.00}, 
				              {	id : 'product 2_24',price : 2400.00},
				              { id : 'product 2_25',price : 2500.00} ],
				
				
				// when element is created, it DD functionality is initialized.
				// so we dont have to worry about changing model.
				initDD : function(context) {
					// need thei poiner to 'this'
					var data = this;
					
					// for convinience
					data.tables = [ this.products1, this.products2];

					// this how we got just created DOM element
					var newElement = context.data.newDomElement;

					// in this example, we keep indexes as attribute in the element
					var index = parseInt(newElement.getAttribute('index'));
					var tableIndex = parseInt(newElement.getAttribute('tableIndex'));
					
					$(newElement).draggable({
			    		helper: function(event) {
			    			// becouse me drag TR elements, its a bit different.
			            	return $('<div class="drag-row"><table class="tablesorter" border="0"  cellpadding="0" cellspacing="1"></table></div>')
			                	.find('table').append($(event.target).closest('tr').clone()).end();
			        	},
			        	appendTo: 'body',
			    	
			        	revert: true, opacity: 0.7 });
			        	
			        	
			       	$(newElement).droppable({
			    	tolerance : 'pointer',
			        drop: function(event, ui) {
			            
			            var dropIndex = parseInt($(this).get(0).getAttribute('index')) + 1;
						var dragIndex = parseInt($(ui.draggable).get(0).getAttribute('index'));
			            
			            var tableDropIndex = parseInt($(this).get(0).getAttribute('tableIndex'));
						var tableDragIndex = parseInt($(ui.draggable).get(0).getAttribute('tableIndex'));
			           
			            var marker = $(this).parent().find('.marker');
			            var position = marker.offset(); 
			            var markerwidth = marker.width(); 
			            
							// becouse we manipulate the drop, we need the copy of helper
							var cloneHelper = $(ui.helper).get(0).cloneNode(true);	
							var helperposition = $(ui.helper).offset();
							
							var deltaLeft = helperposition.left - position.left; 
							var deltaTop = helperposition.top - position.top; 
							
							try {
								$('body').get(0).appendChild(cloneHelper);
								$(cloneHelper).css({position: 'absolute',left:helperposition.left, top:helperposition.top, width:markerwidth});
								
							} catch (e) {
								alert(e);
							}
			            
			            
			            // original helper is removed
			            $(ui.helper).remove();
			           
			            var sourceList = data.tables[tableDragIndex];
			            var targetList = data.tables[tableDropIndex];
			            
			            var element = sourceList[dragIndex];
			           
			            if (tableDragIndex != tableDropIndex) {
			             	// remove element from source
			             	sourceList.splice(dragIndex, 1);
			             	
			            	// add to target
			            	targetList.splice(dropIndex, 0, element);
			            } else {
			            	// same table, reorder
			            	
			            	if (dropIndex > dragIndex) {
			            		sourceList.splice(dragIndex, 1);
			            		targetList.splice(dropIndex-1, 0, element);
			            	} else {
			            		sourceList.splice(dragIndex, 1);
			            		targetList.splice(dropIndex, 0, element);
			            	}
			            	
			            	
			            }
			            context.log('here'+cloneHelper+' position.left:'+position.left);
			            // now create animated 'drop' effect
			            
			           $(cloneHelper).animate({left : position.left-1, top : position.top-1}, 200, function() { 
			           
			            		$(cloneHelper).animate({'color':'white'}, 200, function() {
			            			context.log('here1');
			            			marker.remove();

			            			// rerender the context. The model was changed, so better to rerender
									context.render();
									$(cloneHelper).remove();	
									
									
								});		
						});
						
			        },

			        // nice over feedback
			        over : function(event, ui) {
			        	$(this).after('<tr class="marker"><td colspan="2" style="font-size: 4px; background-color:#dfdfdf !important; color:#dfdfdf">m </td></tr>');
			        },
			        
			        // nice over feedback
			        out : function() {
			       		$(this).parent().find('.marker').remove();
			        },
			        
			        accept: function(e) {
			        	return true;
			        }
			   		});
				}
			};

</script>
<style>
tr.draggable {
cursor: pointer;
}
</style>
<div id="draganddrop" >
<script type="text/html">
<div style="height : 300px">
	<div style="float: left; padding: 10px">
  <table id="table1" class="tablesorter" border="0"  cellpadding="0" cellspacing="1" >
	<thead>
    <tr index="-1" tableIndex="0" oncreate="this.data.draganddrop.initDD(this)">
		<th style="width: 100px;">id</th>
		<th style="width: 100px">price</th>
	</tr>
	</thead>
	<tbody>
	<loop value="#{.draganddrop.products1}" var="row" indexVar="index">
		<tr  class="draggable" index="#{.index}" tableIndex="0" oncreate="this.data.draganddrop.initDD(this)">
			<td style="width: 100px; ">#{.row.id}</td>
			<td style="width: 100px; ">#{.row.price}</td>
		</tr>
	</loop>
		<tr>
			<td colspan="2"><b>Products left : #{.draganddrop.products1.length}</b></td>
		</tr>
	</tbody>
  </table>
</div>
<div style="float: left; padding: 10px">
 <table id="table2" class="tablesorter" border="0" cellpadding="0" cellspacing="1" >
	<thead>
    <tr index="-1" tableIndex="1" oncreate="this.data.draganddrop.initDD(this)">
		<th style="width: 100px;">id</th>
		<th style="width: 100px;">price</th>
	</tr>
	</thead>
	<tbody>
	<loop value="#{.draganddrop.products2}" var="row" indexVar="index">
		<tr class="draggable" index="#{.index}" tableIndex="1" oncreate="this.data.draganddrop.initDD(this)">
			<td style="width: 100px">#{.row.id}</td>
			<td style="width: 100px">#{.row.price}</td>
		</tr>
	</loop>
		<tr>
			<td colspan="2"><b>Products left : #{.draganddrop.products2.length}</b></td>
		</tr>
	</tbody>
  </table>
</div>
</div>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('draganddrop'); 
	// bind model
	gnatooContext.data['draganddrop'] = draganddrop;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


